import React from 'react';
import { Chart } from '@antv/g2';

const data = [
    { day: 'Jan', ctype: '交易额', value: 7 },
    { day: 'Jan', ctype: '交易量', value: 3.9 },
    { day: 'Feb', ctype: '交易额', value: 6.9 },
    { day: 'Feb', ctype: '交易量', value: 4.2 },
    { day: 'Mar', ctype: '交易额', value: 9.5 },
    { day: 'Mar', ctype: '交易量', value: 5.7 },
    { day: 'Apr', ctype: '交易额', value: 14.5 },
    { day: 'Apr', ctype: '交易量', value: 8.5 },
    { day: 'May', ctype: '交易额', value: 18.4 },
    { day: 'May', ctype: '交易量', value: 11.9 },
    { day: 'Jun', ctype: '交易额', value: 21.5 },
    { day: 'Jun', ctype: '交易量', value: 15.2 },
    { day: 'Jul', ctype: '交易额', value: 25.2 },
    { day: 'Jul', ctype: '交易量', value: 17 },
    { day: 'Aug', ctype: '交易额', value: 26.5 },
    { day: 'Aug', ctype: '交易量', value: 16.6 },
    { day: 'Sep', ctype: '交易额', value: 23.3 },
    { day: 'Sep', ctype: '交易量', value: 14.2 },
    { day: 'Oct', ctype: '交易额', value: 18.3 },
    { day: 'Oct', ctype: '交易量', value: 10.3 },
    { day: 'Nov', ctype: '交易额', value: 13.9 },
    { day: 'Nov', ctype: '交易量', value: 6.6 },
    { day: 'Dec', ctype: '交易额', value: 9.6 },
    { day: 'Dec', ctype: '交易量', value: 4.8 },
];

var chart;
class G2Line extends React.Component {
    componentDidMount() {
        this.props.onRef(this);
        this.chartInit();
        this.loadData();
    }
    chartInit = () => {
        chart = new Chart({
            container: 'container',
            autoFit: true,
            height: this.props.height?this.props.height:360,
        });

        chart.scale('value', {
            nice: true,
        });        

        chart
            .line()
            .position('day*value')
            .color('ctype')
            .shape('smooth');

        // chart
        //     .point()
        //     .position('day*value')
        //     .color('ctype')
        //     .shape('circle');
        chart.tooltip({
            showCrosshairs: true, // 展示 Tooltip 辅助线
            shared: true,
        });
        chart.legend({
            position: 'right',
        });
    }
    loadData = () => {
        const { ParentData } = this.props;
        chart.changeData(ParentData.length==0?data:ParentData);
        chart.render();
    }
    render() {
        return (
            <div id='container'></div>
        )
    };
}
export default G2Line;